<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" media="screen" href="../../css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="../../css/dataTables.bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="../../layui/css/layui.css">
</head>
<body>
    <div>
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <header style="height: 100%">
                    <div align="left">
	                    <table style="width: 100%">
	                   		<tr>
	                   			<td>
									<form class="form-inline" onsubmit="return false">
										<div class="form-group">
											用户名：
											<input id="username" type="text" class="form-control" placeholder="用户名">
											昵称：
											<input id="nickname" type="text" class="form-control" placeholder="昵称">
											状态：
											<select class="form-control input-sm" id="status">
											</select>
											<button id="searchBt" class="layui-btn layui-btn-sm" permission="sys:user:query"><i class="layui-icon">&#xe615;</i>搜索</button>
										</div>
									</form>
								</td>
								<td align="center">
	                   				<button class="layui-btn layui-btn-sm" onclick="location.href='addUser.html'" permission="sys:user:add">
                                      <i class="layui-icon">&#xe608;</i> 添加
                                    </button>
                                    <button class="layui-btn layui-btn-sm" permission="sys:user:add" id="import">
                                        <i class="layui-icon">&#xe62d;</i> 导入
                                    </button>
                                    <button class="layui-btn layui-btn-sm" onclick="location.href='import.xlsx'" permission="sys:user:add">
                                        <i class="layui-icon">&#xe601;</i> 导入模板下载
                                    </button>
                                </td>
	                   		</tr> 
	                    </table>
					</div>
                </header>
                
                <div>
                    <div class="widget-body no-padding">
                        <table id="dt-table" class="table table-striped table-bordered table-hover" style="width:100%">
                            <thead>
                                <tr>
                                </tr>                       
                                <tr>
                                    <th>username</th>
                                    <th>昵称</th>
                                    <th>手机号</th>
                                    <th>邮箱</th>
									<th>状态</th>     
									<th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
        </div>
    </div>
</body>
</html>

<script type="text/javascript" src="../../js/libs/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../../js/jq.js"></script>
<script type="text/javascript" src="../../js/plugin/datatables/jquery.dataTables.min.js"></script>
<!--开始&ndash;&gt;excel导出需要的js-->
<script type="text/javascript" src="../../js/plugin/datatables/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="../../js/plugin/datatables/jszip.min.js"></script>
<script type="text/javascript" src="../../js/plugin/datatables/buttons.flash.js"></script>
<script type="text/javascript" src="../../js/plugin/datatables/buttons.html5.min.js"></script>
<!--结束&ndash;&gt;excel导出需要的js-->
<script type="text/javascript" src="../../js/plugin/datatables/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="../../js/my/permission.js"></script>
<script type="text/javascript" src="../../layui/layui.js"></script>
<script type="text/javascript" src="../../js/dict.js"></script>
<script type="text/javascript">
layui.use([ 'layer' ], function() {
	var layer = layui.layer;
});
var userStatus = showDictSelect("status", "userStatus", true);

var pers = checkPermission();

var example;
function init(){
	example = 
    	$('#dt-table').DataTable({
        	"searching": false,
        	"processing": false,
        	"serverSide" : true,
        	"language": {
                "url": "/js/plugin/datatables/Chinese.lang"
            },
//            dom: 'Bfrtip',

        	"ajax": {
        		"url" : "/users",
        		"type":"get",
        		"data":function(d){
    				d.username = $('#username').val();
    				d.nickname = $('#nickname').val();
    				d.status = $('#status').val();
        		},
    			"error":function(xhr, textStatus, errorThrown){
    				var msg = xhr.responseText;
    				console.log(msg);
    				var response = JSON.parse(msg);
    				var code = response.code;
    				var message = response.message;
    				if (code == 400) {
    					layer.msg(message);
    				} else if (code == 401) {
    					localStorage.removeItem("token");
    					layer.msg("token过期，请先登录", {shift: -1, time: 1000}, function(){
    						location.href = '/login.html';
                        });
    				} else if (code == 403) {
    					console.log("未授权:" + message);
    					layer.msg('未授权');
    				} else if (code == 500) {
    					layer.msg('系统错误：' + message);
    				}
    			}
        	},
        	"dom": "<'dt-toolbar'r>t<'dt-toolbar-footer'<'col-xs-6 col-sm-6 hidden-xs'i><'col-xs-3 col-sm-3' p v><'col-xs-3 col-sm-3' B>>",
            buttons: [{
                extend: 'excel',
                text: '导出数据',
                title: '用户列表',
                className: 'layui-btn layui-btn-sm layui-expbtn',
                customize: function (xlsx) {
                    var sheet = xlsx.xl.worksheets['sheet1.xml'];
                    $('row c[r^="C"]', sheet).attr('s', '2');
                }
            }],
            "columns": [
                { "data": "username", "defaultContent": ""},
                { "data": "nickname", "defaultContent": ""},
                { "data": "phone", "defaultContent": ""},
                { "data": "email", "defaultContent": ""},
                { 
                	"data": "status", 
                	"defaultContent": "",
                	"render": function (data, type, row) {
                    	return userStatus[data];
                  	}
                },
                { 
                	"data": "", 
                	"defaultContent": "",
                	"orderable":false,
                	"render": function (data, type, row) {
                		var id = row['id'];
                		var username = row['username'];
                		var href = "updateUser.html?id=" + id;
                		var edit = buttonEdit(href, "sys:user:add", pers);
                        var resetPwd =  $("<button class='layui-btn layui-btn-xs' title='重置密码' permission='sys:user:add' onclick=resetPwd('" + username + "')><i class='layui-icon'>&#xe673;</i>重置密码</button>");
                        var disable =  $("<button class='layui-btn layui-btn-xs' title='禁用' permission='sys:user:add' onclick=changeStatus('" + username + "',0)><i class='layui-icon'>&#x1006;</i>禁用</button>");
                        var enable =  $("<button class='layui-btn layui-btn-xs' title='启用' permission='sys:user:add' onclick=changeStatus('" + username + "',1)><i class='layui-icon'>&#xe605;</i>启用</button>");
                        resetPwd = resetPwd.prop("outerHTML");
                        disable = disable.prop("outerHTML");
                        enable = enable.prop("outerHTML");
                        return edit + resetPwd + disable + enable;
                  }
                },
                
            ],
            "order": [[ 0, "desc" ],[1, "asc"]]
        } );
//    example.buttons().container()
//        .appendTo( $('.col-sm-10:eq(0)', example.table().container() ) );
}

$("#searchBt").click(function(){
	example.ajax.reload();
});

function resetPwd(username){
    layer.confirm('确定要重置密码吗？', {
        btn : [ '确定', '取消' ]
    }, function() {
        $.ajax({
            type : 'put',
            url : '/users/resetPwd/'+username,
            success : function(data) {
                layer.msg("重置密码成功");
            }
        });
        layer.close(1);
    });
}

function changeStatus(username, status){
    var promo = "启用";
    if(status==0){
        promo = "禁用"
    }
    layer.confirm('确定要' + promo + '该用户吗？用户名：' + username, {
        btn : [ '确定', '取消' ]
    }, function() {
        $.ajax({
            type : 'get',
            url : '/users/changeStatus/'+username,
            data : {
                status : status
            },
            success : function(data) {
                layer.msg(promo + "成功");
            }
        });
        layer.close(1);
    });
}

layui.use('upload', function(){
    var upload = layui.upload;
    upload.render({
        elem: '#import' //绑定元素
        ,accept: 'file' //允许上传的文件类型
        ,url: '/users/import' //上传接口
        ,done: function(res, index, upload){
            debugger;
            layer.msg("导入成功");
            example.ajax.reload();
        },error:function(index, upload){
            debugger;
            layer.msg("导入失败");
            example.ajax.reload();
        }
    });
});

init();
</script>